<template>
  <div class="login-container">
    <div class="logo">
      <img src="@/assets/illustration.svg" width="300" alt="" />
    </div>
    <div class="form">
      <h3>智慧校园生活服务平台</h3>
      <a-card class="login-card">
        <!-- 放置登录表单 -->
        <!-- autocomplete不自动填充表单 -->
        <a-form :model="loginForm" autocomplete="off" @finish="onFinish">
          <a-form-item name="account" :rules="formRules.account">
            <a-input size="large" v-model:value="loginForm.account"></a-input>
          </a-form-item>
          <a-form-item name="password" :rules="formRules.password">
            <a-input-password size="large" v-model:value="loginForm.password"></a-input-password>
          </a-form-item>
          <a-form-item name="isAgree" :rules="[{ validator: validatorAgree }]">
            <a-checkbox v-model:checked="loginForm.isAgree">用户平台使用协议</a-checkbox>
          </a-form-item>
          <a-form-item>
            <a-button size="large" type="primary" block html-type="submit">登录</a-button>
          </a-form-item>
        </a-form>
      </a-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useUserStore } from '@/stores'
import type { IUser } from '@/types/user'
import { message } from 'ant-design-vue'

const loginForm = reactive<IUser>({
  account: 'admin',
  password: 'admin888',
  isAgree: false
})

const formRules = reactive({
  account: [{
    required: true,
    message: '账号不能为空',
    trigger: ['change', 'blur']
  },
  {
    min: 5, max: 10, message: '账号长度为5-10位',
    trigger: ['change', 'blur']
  }],
  password: [{
    required: true,
    message: '密码不能为空',
    trigger: ['change', 'blur']
  },
  {
    min: 6, max: 12, message: '密码长度为6-12位',
    trigger: ['change', 'blur']
  }]
})

// 自定义校验规则 rule是当前的规则 value是当前的值
const validatorAgree = (rule: any, value: Boolean) => {
  // 判断value是不是true  如果不是true就报错
  // Promise是es6的一个构造函数- 等待 成功 失败  resolve 成功  reject失败
  return value ? Promise.resolve() : Promise.reject(new Error("您必须同意用户协议"))

}

const store = useUserStore()
const router = useRouter()
const onFinish = async (value: IUser) => {
  const res = await getLogin(loginForm)
  store.setUser(res.data)
  router.push('/')
  message.success('登陆成功')
}
</script>

<style lang="less">
.login-container {
  display: flex;
  align-items: stretch;
  height: 100vh;

  .logo {
    flex: 3;
    background: url(../../assets/bg.png) no-repeat center / cover;
    border-top-right-radius: 60px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    padding: 0 100px;


    p {
      color: #fff;
      font-size: 18px;
      margin-top: 20px;
      width: 300px;
      text-align: center;
    }
  }

  .form {
    flex: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 50px;

    .ant-card {
      width: 320px;
      border: none;
      padding: 0;
    }

    h3 {
      padding-left: 30px;
      font-size: 24px;
    }
  }
}
</style>
